//品类数据分析
import * as React from 'react'
import { Card, Button, Form, Row, Col, Select } from 'antd'
import Authentication from '../../router/Authentication'
import { PageHeaderLayout, StandardTable } from '..'
import '../../assets/style/TableList.less'
import { FormComponentProps } from 'antd/lib/form/Form'
const FormItem = Form.Item
const Option = Select.Option

export interface State {
  formValues: string
}

@Authentication
class CateInfo extends React.Component<any & FormComponentProps , State> {
  
  state = {
    formValues: ''
  }
  componentDidMount () {
    this.search({}, {})
  }

  handleFormReset = () => {
    const { form } = this.props
    form.resetFields()
    this.setState({
      formValues: ''
    })
    this.search({}, {})
  }
  /**
   * 点击查询按钮
   */
  handleSearch = (e: any) => {
    e.preventDefault()
    const { form, data: { pagination } } = this.props
    form.validateFields((err: any, fieldsValue: any) => {
      if (err) return
      if(fieldsValue.suppliers) fieldsValue.suppliers = fieldsValue.suppliers.join(',')
      this.setState({
        formValues: fieldsValue
      })
      this.search({
        ...fieldsValue,
        pageIndex: pagination.current,
        pageSize: pagination.pageSize,
      }, pagination)
    })
  }
  /**
   * 调用查询方法
   */
  search (param: any, page: any) {
    const { list, band } = this.props
    list({
      ...param,
      sampleId: band.id
    }, page)
  }
  renderSimpleForm() {
    const { form, venders } = this.props
    const { getFieldDecorator } = form
    return (
      <Form onSubmit={this.handleSearch} layout="inline">
        <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
          <Col md={7} sm={24}>
            <FormItem label="供应商">
              {getFieldDecorator('suppliers')(
                <Select placeholder="请输入/选择供应商" showSearch mode="multiple">
                  {venders.map( (vender: any, index: number) => (<Option key={index} value={vender.Key}>{vender.Value}</Option>))}
                </Select>)}
            </FormItem>
          </Col>
          <Col md={4} sm={24}>
            <span className="submitButtons">
              <Button type="primary" htmlType="submit">
                查询
              </Button>
              <Button style={{ marginLeft: 8 }} onClick={this.handleFormReset}>
                重置
              </Button>
            </span>
          </Col>
        </Row>
      </Form>
    )
  }
  /**
   * 筛选或者更改分页
   */
  handleStandardTableChange = (pagination: any, filtersArg: any, sorter: any) => {
    const { formValues } = this.state
    let params: any = formValues
    params = {
      ...params,
      pageIndex: pagination.current,
      pageSize: pagination.pageSize,
    }
    this.search(params, pagination)
  }
  render () {
    const { loading, data } = this.props
    const columns: any [] = [
      {
        title: '中类',
        dataIndex: 'dlid',
        key: 'dlid',
      },{
        title: '小小类',
        dataIndex: 'xlid',
        key: 'xlid',
      },{
        title: '款数同比',
        dataIndex: 'anstyleqty',
        key: 'anstyleqty',
      },{
        title: '销量同比',
        dataIndex: 'ansaleqty',
        key: 'ansaleqty',
      },{
        title: '销额同比',
        dataIndex: 'anvalueqty',
        key: 'anvalueqty',
      },{
        title: '库存目标比在仓',
        dataIndex: 'stockrate',
        key: 'stockrate',
      },{
        title: '库存目标比在途',
        dataIndex: 'totstockrate',
        key: 'totstockrate',
      },{
        title: '规划数',
        dataIndex: 'planqty',
        key: 'planqty',
      },{
        title: '实际数',
        dataIndex: 'realqty',
        key: 'realqty',
      },{
        title: '差异数',
        dataIndex: 'diffqty',
        key: 'diffqty',
      }
    ]
    return (
      <PageHeaderLayout
        title="">
        <Card bordered={false}>
          <div className="tableList">
            <div className="tableListForm">{this.renderSimpleForm()}</div>
            <StandardTable
              rowKey = "id"
              select = {false}
              loading={loading}
              data={data}
              columns={columns}
              onChange={this.handleStandardTableChange}
            />
          </div>
        </Card>
      </PageHeaderLayout>
    )
  }
}

import * as actions from '../../redux/actions/CateInfoAction'
import * as globalActions from '../../redux/actions/GlobalAction'
import { StoreState } from '../../redux/Types'
import { Dispatch } from 'redux'
import { connect } from 'react-redux'
export function mapStateToProps({cateInfo: { data, loading }, setting: { venders }, global: { band } }: StoreState) {
  return {
    band,
    data,
    loading,
    venders
  }
}
export function mapDispatchToProps(dispatch: Dispatch<actions.CateInfoAction | globalActions.GlobalAction>) {
  return {
    list: (data: any, page: any) => {
      dispatch(actions.page(page))
      dispatch(actions.GetCateInfoList(data))
    }
  }
}
export default connect(mapStateToProps, mapDispatchToProps)(Form.create()(CateInfo))